<template>
  <div class="homepage">
    <!--top-->
    <div class="top">
      <div class="topNav">
        <div class="topNavleft">
          <img src="../../assets/imgs/logo_blue.png" alt>
        </div>
        <div class="topNavRight">
          <div class="userImg">
            <img :src="userInfo?userInfo.headImage:''" alt style="border-radius:50% 50%">
          </div>
          <div style="color:#3D4966;font-szie:14px">{{userInfo?userInfo.nickName:''}}，欢迎您！</div>
          <img src="../../assets/imgs/out.jpg" alt @click="dodel" style="width:20px;height:19px;">
        </div>
      </div>
    </div>
    <!-- 侧边栏 -->
    <div class="leftMenu">
      <div style="width:100%;display: flex;flex-direction: row;padding-left: 19px;" class="shouye">
        <i class="icon-icon1"></i>
        <span
          @click="go"
          style="display:inline-block;height:52px;width:180px;padding-left:20px;line-height:52px;border-right:1px solid #ccc;font-size:16px"
        >首页</span>
      </div>
      <el-container>
        <el-aside width="100%" class="inconda">
          <el-menu
            :default-openeds="openeds"
            router
            :unique-opened="true"
            :collapse="isCollapse"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            background-color="#fff"
            text-color="#1F2E4D"
            active-text-color="#FFFFFF"
            :defaultActive="nowIndex"
          >
            <el-submenu
              :index="item.label"
              v-for="item in leftMenuList"
              :key="item.id"
              v-if="item.children !== undefined && item.children.length > 0 && item.status == 0"
            >
              <template slot="title">
                <div style="display: flex;flex-direction: row;">
                  <i :class="'icon-icon'+item.id"></i>
                  <span>{{item.label}}</span>
                </div>
              </template>
              <el-menu-item
                :index="tag.router"
                v-for="tag in item.children"
                :key="tag.id"
                @click="itemClick"
                v-if="tag.status == 0"
              >
                <span slot="title">{{tag.label}}</span>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
      </el-container>
    </div>
    <keep-alive :include="/\S*/" :exclude="/Personnel|ServiceAudit|Joblist/">
      <router-view/>
    </keep-alive>
  </div>
</template>
<script>
import http from '../../assets/utils/http'

export default {
  name: 'homepage',
  data() {
    return {
      nowIndex: '',
      openeds: ['1', '2', '3'],
      uniqueOpened: false,
      isCollapse: false,
      logo: require('@/assets/logo.png'),
      userInfo: [],
      userImg: require('@/assets/logo.png'),
      leftMenuList: [],
      key: ''
    }
  },
  methods: {
    itemClick(e){
      console.log("index",e.index)
      if(e.index=='/TalentReview'){
        localStorage.removeItem("cache_t");
      }else if(e.index=='/EnterpriseAudit'){
        console.log("777777777777777777")
        localStorage.removeItem("cache_c");
      }
    },
    initData() {
      this.lAxios({
        method: 'post', //方法
        url: '/platform/selectJobSearchByAdituo.do',
        params: {}
      }).then(res => {
        res = res.data
        if (res.status == 0) {
          localStorage.setItem('staticData', JSON.stringify(res.data))
          //console.log('local', localStorage.getItem('staticData'))
        }
      })
    },
    go() {
      this.$router.push('/homepage')
    },
    toggleCollapse() {
      this.isCollapse = !this.isCollapse
    },
    handleOpen(key, keyPath) {
      if (key == 'm_xmce_status') {
        // console.log(1111)
        this.$router.push({ path: '/m_xmce_status' })
      }
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    },
    firstClick(index) {
      for (let i = 0; i < this.leftMenuList.length; i++) {
        let leftMenuList = this.leftMenuList[i]
        leftMenuList.isActive = false
      }
      this.leftMenuList[index].isActive = true
      this.$router.push(this.leftMenuList[index].router) //跳转路径
    },
    secClick(indexa, indexb, itemB) {
      // console.log(item)
      //左侧第二级点击事件
      let oldArr = this.leftMenuList
      //将所有点击效果取消
      oldArr.forEach(item => {
        if (item.children) {
          item.children.forEach(itemB => {
            itemB.isActive = false
          })
        }
      })
      // 这一个点击事件生效
      let choseObj = oldArr[indexa].children[indexb]
      choseObj.isActive = true
      this.$router.push(itemB.router)
    },
    dodel() {
      this.lAxios({
        method: 'post', //方法
        url: '/platform/platformlogout.do', //路径，基础路径在main.js里面配置
        params: {}
      })
        .then(res => {
          console.log(res)
          if (res.data.status == 0 || res.status == 10) {
            this.$router.push('/')
          } else {
            this.$message.error('退出失败！')
          }
        })
        .catch(res => {
          console.log('登出失败的回调', res)
        })
    },
    showMenu() {
      let userInfo = localStorage.getItem('userInfo')
      userInfo = JSON.parse(userInfo)
      // console.log('user info', userInfo)
      if (userInfo) {
        this.lAxios({
          method: 'post', //方法
          url: '/power/getPowerByRoleId.do', //路径，基础路径在main.js里面配置
          params: { roleId: userInfo.roleId }
        }).then(res => {
          // console.log('home page', res)
          if (res) {
            if (res.data.status == 0) {
              let resData = res.data.data
              // console.log(resData)
              resData = JSON.parse(resData)
              // console.log(resData);
              this.leftMenuList = resData
            } else {
            }
          }
        })
      }
    }
  },
  created() {
    var userI = localStorage.getItem('userInfo')
    this.userInfo = JSON.parse(userI)
    console.log('init', userI)
    this.showMenu()
  },
  mounted() {
    this.nowIndex = this.$route.path
    this.initData()
  }
}
</script>

<style lang="scss" scoped>
.homepage {
  box-sizing: border-box;
  width: 100%;
  padding-top: 100px;
  padding-left: 220px;
  position: relative;
  /*overflow-y: hidden;*/
}
.top {
  width: 100%;
  height: 80px;
  background-color: white;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9;
  box-shadow: 0px 6px 12px 0px rgba(230, 233, 240, 0.5);
}
.leftMenu::-webkit-scrollbar {
  display: none;
}

.leftMenu {
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  width: 200px;
  height: 100vh;
  padding-top: 100px;
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 8;
  /*background-color: yellow;*/
}

.topNav {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  line-height: 100%;
  position: relative;
  display: flex;
  justify-content: space-between;
}

.topNav div {
  display: flex;
  flex-direction: row;
}

.logo {
  width: 55px;
  height: 42px;
  cursor: pointer;
  /*border: 1px solid black;*/
  margin-left: 15px;
  margin-top: 10px;

  img {
    width: 100%;
  }
}

.topNavleft {
  padding-left: 50px;
  display: flex;
  align-items: center;
  img {
    height: 42px;
  }
}

.topNavRight {
  margin-right: 50px;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.topNavRight > div {
  margin-left: 10px;
}

.userImg {
  cursor: pointer;
  /*border: 1px solid black;*/
  img {
    width: 30px;
    height: 30px;
  }
}

/*--------------leftMenu---------------------*/
.leftMenuList {
  width: 145px;
  cursor: pointer;
}

.firstli {
  width: 145px;
  text-align: left;
}

.firstDiv {
  height: 41px;
  line-height: 41px;
  padding-left: 10px;
  margin-bottom: 10px;
  background-color: #d7d7d7;
}

.menuChild {
  width: 100%;
}

.LChildli {
  width: 100%;
  margin-bottom: 10px;
  text-align: left;
  background-color: #f2f2f2;

  div {
    height: 41px;
    line-height: 41px;
    padding-left: 10px;
  }
}

.active {
  background-color: #199ed8;
  color: #333;
}

.el-menu-item.is-active {
  background-color: #3377ff !important;
}

.el-submenu__title:hover {
  background-color: transparent !important;
}

.el-menu-item:hover {
  // background-color:transparent !important;
}

.el-submenu:hover {
  background-color: transparent !important;
}

.shouye:hover {
  background-color: #c7c5c5;
}

.shouye:visited {
  background-color: #3377ff;
}

.icon-icon1 {
  width: 22px;
  height: 22px;
  background: url('../../assets/img/leftmenu/icon1.png') no-repeat;
  background-size: 20px 20px;
  display: block;
  margin-top: 16px;
  /*margin-right: 15px;*/
}

.icon-icon2 {
  width: 20px;
  height: 20px;
  background: url('../../assets/img/leftmenu/icon2.png') no-repeat;
  background-size: 20px 20px;
  display: block;
  margin-top: 16px;
  margin-right: 15px;
}

.icon-icon3 {
  width: 20px;
  height: 20px;
  background: url('../../assets/img/leftmenu/icon3.png') no-repeat;
  background-size: 20px 20px;
  display: block;
  margin-top: 16px;
  margin-right: 15px;
}

.icon-icon4 {
  width: 20px;
  height: 20px;
  background: url('../../assets/img/leftmenu/icon4.png') no-repeat;
  background-size: 20px 20px;
  display: block;
  margin-top: 16px;
  margin-right: 15px;
}

.icon-icon5 {
  width: 20px;
  height: 20px;
  background: url('../../assets/img/leftmenu/icon-5.png') no-repeat;
  background-size: 20px 20px;
  display: block;
  margin-top: 16px;
  margin-right: 15px;
}

.icon-icon6 {
  width: 20px;
  height: 20px;
  background: url('../../assets/img/leftmenu/icon-6.png') no-repeat;
  background-size: 20px 20px;
  display: block;
  margin-top: 16px;
  margin-right: 15px;
}

.icon-icon7 {
  width: 20px;
  height: 20px;
  background: url('../../assets/img/leftmenu/icon-7.png') no-repeat;
  background-size: 20px 20px;
  display: block;
  margin-top: 16px;
  margin-right: 15px;
}

.icon-icon8 {
  width: 20px;
  height: 20px;
  background: url('../../assets/img/leftmenu/icon-8.png') no-repeat;
  background-size: 20px 20px;
  display: block;
  margin-top: 16px;
  margin-right: 15px;
}
.icon-icon9 {
  width: 20px;
  height: 20px;
  background: url('../../assets/img/leftmenu/icon-9.png') no-repeat;
  background-size: 20px 20px;
  display: block;
  margin-top: 16px;
  margin-right: 15px;
}
</style>
